<template>
	<div>
		<el-card class="box-card my-3">
			<div slot="header" class="clearfix">
				<span>退货商品</span>
			</div>
			<div class="text item">
				<el-table
				:data="tableData"
				style="width: 100%">
				<el-table-column
				label="商品名称"
				prop="name">
			</el-table-column>
			<el-table-column
			label="货号/价格"
			prop="title">
		</el-table-column>
		<el-table-column
		label="商品图标"
		>
		<template slot-scope="scope">
			<img :src="scope.row.avatar" alt="" style="height: 3rem">
		</template>
	</el-table-column>
	<el-table-column
	label="属性"
	prop="id">
</el-table-column>
<el-table-column
label="数量"
prop="id">
</el-table-column>
<el-table-column
label="小计"
prop="id">
</el-table-column>
</el-table>
<div slot="header" class="clearfix">
	<span>合计：</span>
</div>
</div>
</el-card>
<el-card class="box-card">
	<div slot="header" class="clearfix">
		<span>服务单信息</span>
	</div>
	<div class="text item">
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="服务单号">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="订单编号">
				<el-input v-model="form.name" disabled></el-input>
				<el-button type="text">查看</el-button>
			</el-form-item>
			<el-form-item label="申请时间">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="用户账户">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="联系人">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="电话">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="退货原因">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="问题描述">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>
			<el-form-item label="凭证图片">
				<el-image
				style="width: 100px; height: 100px"
				:src="pojo.url"
				fit="cover">
				</el-image>
			</el-form-item>
			<el-form-item label="订单金额">
				<el-input v-model="form.name" disabled></el-input>
			</el-form-item>

			<el-form-item label="退运费">
				<el-radio-group v-model="form.resource">
					<el-radio label="不退运费"></el-radio>
					<el-radio label="退运费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="收货点" label-position="left">
				<el-select v-model="form.region" placeholder="请选择活动区域">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="收货人姓名" label-width="90px">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="收货人地址" label-width="90px">
				<div class="position" data-toggle="distpicker">
					<select v-model="position.province" data-province="---- 选择省 ----"></select>
					<select v-model="position.city" data-city="---- 选择市 ----"></select>
					<select v-model="position.district" data-district="---- 选择区 ----"></select>
				</div>
			</el-form-item>


			<el-form-item label="详细地址">
				<el-input type="textarea" v-model="form.desc"></el-input>
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input type="text" v-model="form.desc"></el-input>
			</el-form-item>
			<el-form-item label="处理备注">
				<el-input type="textarea" v-model="form.desc"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary">确认退货</el-button>
				<el-button type="danger">拒绝退货</el-button>
			</el-form-item>
		</el-form>
	</div>
</el-card>
</div>

</template>

<script>
import 'jquery/dist/jquery.js'
import 'distpicker/dist/distpicker.js'
	export default {
		data(){
			return {
				form:{},
				tableData: [],
				position: {},
				pojo: {},
			}
		}
	}
</script>


<style scoped>
.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}
.clearfix:after {
	clear: both
}

.box-card {
	width: 800px;
	margin: 0 auto;
}
.position select {
	
	margin: 0 8px;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
}
</style>